<!--
 * @Author: 吴竹叶 2107206923@qq.com
 * @Date: 2023-10-12 19:35:45
 * @LastEditors: 吴竹叶 2107206923@qq.com
 * @LastEditTime: 2023-10-13 13:45:24
 * @FilePath: \BZ_JT_AnQuanHuanBaoGuanLiApp\src\views\staging\commom\AlarmManagement\components\safety\detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="bg-white p-1">
    <custom-title :is-line="true" title="基本信息" />
    <div class="baseInfo">
      <div v-for="(item, index) in descList" :key="index + 'base'">
        <custom-details-item :icon="item.icon" :label="item.label" one-color :value="item.value" />
      </div>
    </div>
    <template v-if="active === '视频报警'">
      <custom-title :is-line="true" title="报警视频" />
      <custom-player :camera-code="attachmentPath" />
    </template>
    <custom-title :is-line="true" title="处置流程" />
    <div class="NyAlarmFlow">
      <custom-timeline :list="timeList" type="能源" :alarm-id="$route.query.monitorAlarmId" :alarm-type="2" />
    </div>
  </div>
</template>
<script>
import customTimeline from '@/components/common/custom-timeline.vue'
import CustomPlayer from '@/components/common/custom-player.vue'
import { MonitorAalarmInfo, NyAlarmFlow } from '@/api/commonPage/AlarmManagement'

export default {
  components: {
    customTimeline,
    CustomPlayer
  },
  inject: ['layout'],
  data() {
    return {
      active: this.$route.query.active,
      descList: [
        { field: 'companyName', label: '企业名称', icon: '&#xe725;', value: '/' },
        { field: 'eventType', label: '报警类别', icon: '&#xe87e;', value: '/' },
        { field: 'alarmLevel', label: '报警级别', icon: '&#xe696;', value: '/' },
        { field: 'reportTime', label: '报警时间', icon: '&#xe685;', value: '/' },
        { field: 'alarmItem', label: '监测指标', icon: '&#xe6b7;', value: '/' },
        { field: 'deviceName', label: '设备名称', icon: '&#xe6b7;', value: '/' },
        { field: 'deviceCode', label: '设备编码', icon: '&#xe67a;', value: '/' },
        { field: 'meteringLevel', label: '计量级别', icon: '&#xe696;', value: '/' },
        { field: 'isCreateTask', label: '是否生成处置任务', icon: '&#xe6b7;', value: '/' },
        { field: 'isClose', label: '是否误报', icon: '&#xe6b7;', value: '/' }
      ],
      attachmentPath: '',
      timeList: []
    }
  },
  computed: {},
  mounted() {
    this.baseInfo()
    this.alarmFlow()
  },
  methods: {
    async alarmFlow() {
      this.layout.showAreaLoading(['.NyAlarmFlow'])
      const { status: alarmFlowStatus, data: alarmFlowData } = await NyAlarmFlow({
        AlarmType: 2,
        monitorAlarmId: this.$route.query.monitorAlarmId
      })
      if (alarmFlowStatus === 0 && alarmFlowData) {
        alarmFlowData.forEach((x) => {
          x.activeNames = ['1']
        })
        this.timeList = alarmFlowData
      }
      this.layout.hideAreaLoading(['.NyAlarmFlow'])
    },
    async baseInfo() {
      this.layout.showAreaLoading(['.baseInfo'])
      const { status, data } = await MonitorAalarmInfo({ monitorAlarmId: this.$route.query.monitorAlarmId })
      if (status === 0 && data) {
        this.descList.forEach(v => {
          v.value = data[v.field] ? data[v.field] : v.value
        })
        this.attachmentPath = data.attachmentPath
      }
      this.layout.hideAreaLoading(['.baseInfo'])
    }
  }
}
</script>
<style scoped lang="scss">
</style>
